.pickPage {
    .topTimeSelect {
        padding: 4rem 16rem;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 8rem;

        .timeItem {
            width: 80rem;
            height: 32rem;
            line-height: 32rem;
            text-align: center;
            border-radius: 17rem;
            background: #F1F5F9;
            color: #343C4B;

            text-align: center;
            font-family: Inter;
            font-size: 14rem;
            font-style: normal;
            font-weight: 500;

            &.active {
                background-color: #FF2D55;
                color: #FFF;
            }
        }
    }

    .inputNumber {
        padding: 0rem 16rem;
        margin-top: 22rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .width1 {
            width: 196rem;
        }

        .serialNumber {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .title {
                color: #343C4B;

                text-align: center;
                font-family: Inter;
                font-size: 16rem;
                font-style: normal;
                font-weight: 500;
                line-height: 16rem;
            }

            .fillInBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &>input {
                    border: none;
                    outline: none;
                    border-radius: 16rem;
                    border: 1rem solid #FF2D55;
                    width: 56rem;
                    height: 32rem;
                    text-indent: 10rem;
                    margin-top: 12rem;
                }
            }

            .addShopping {
                margin-top: 12rem;
                width: 100%;
                border-radius: var(--Price, 20rem);

                background: #DEE3EA;
                display: inline-flex;
                height: 32rem;
                line-height: 32rem;
                justify-content: center;
                align-items: center;
                color: #717886;

                text-align: center;
                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 500;
                line-height: 16rem;
            }
        }
    }

    .shoppingCart {
        background: #F1F5F9;
        height: auto;
        padding: 16rem;
        box-sizing: border-box;
        margin-top: 32rem;

        .shoppingInfo {
            width: 100%;
            border-radius: 12rem;
            border: 1rem solid #E8E6EF;
            background: #FFF;

            box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);

            .top {
                display: flex;
                align-items: center;
                border-radius: 12rem 12rem 0rem 0rem;
                justify-content: space-between;
                height: 28rem;
                background: #FF2D55;
                padding: 7rem 12rem;
                display: flex;
                align-items: center;
                color: #FFF;

                font-family: Inter;
                font-size: 16rem;
                font-style: normal;
                font-weight: 500;
                line-height: 16rem;
            }
        }

        .cartTable {

            background-color: white;

            .width1 {
                width: 20%;
            }

            .width2 {
                width: 30%;
            }

            .width3 {
                width: 15%;
            }

            .width4 {
                width: 35%;
            }

            .tableTitle {
                color: #343C4B;
                line-height: 36rem;
                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 600;
                text-align: center;
                display: flex;
                align-items: center;
                padding-right: 16rem;
                box-sizing: border-box;
            }

            .tableItem {
                padding-right: 16rem;
                box-sizing: border-box;
                border-top: 1rem solid #E8E6EF;
                line-height: 36rem;
                color: #343C4B;
                font-family: Inter;
                text-align: center;
                font-size: 14rem;
                font-style: normal;
                display: flex;
                align-items: center;
                font-weight: 500;

                .numberInfo {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                   
                    .leftNum {
                        width: 76rem;
                        height: 24rem;
                        border-radius: 15rem;
                        line-height: 24;
                        border: 1rem solid #A4ACC1;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        div {
                            text-align: center;
                        }

                        .num {
                            display: flex;
                            margin:0rem 4rem 0rem 4rem;
                            width: 24rem;
                            height: 25rem;
                            justify-content: center;
                            align-items: center;
                            border-left: 0.5rem solid #A4ACC1;
                            border-right: 0.5rem solid #A4ACC1;
                        }
                    }
                }
            }
        }
    }

    .collapseContainer {
        height: auto;

        ::v-deep(.van-cell__right-icon) {
            color: #FC3666;
        }

        ::v-deep(.van-collapse-item__content) {
            background-color: #F1F5F9;

            &>div {
                margin-top: 9rem;
                color: #6D7584;

                font-family: Inter;
                font-size: 12rem;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }

            .rewardStructure {
                color: #FF2D55;
                font-family: Inter;
                font-size: 13rem;
                font-style: normal;
                font-weight: 600;
                line-height: 16rem;
            }

            .rewardTable {
                margin-top: 12rem;
                border-radius: 12rem;
                border: 1rem solid #E8E6EF;

                background: #FFF;

                box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);

                .tableTitle {
                    display: flex;
                    align-items: center;
                    text-align: center;
                    border-radius: 12rem 12rem 0rem 0rem;
                    background: #FFE8EE;
                    color: #343C4B;
                    height: 34rem;
                    line-height: 34rem;

                    font-family: Inter;
                    font-size: 14rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 16rem;
                }

                .tableBody {
                    .tableItem {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        height: 32rem;
                        line-height: 32rem;

                        :not(:first-child) {
                            border-top: 1rem solid #E8E6EF;
                        }

                        :nth-child(1) {
                            color: #FF2D55;
                            font-size: 12rem;
                            font-weight: 500;
                        }

                        :nth-child(2) {
                            color: #343C4B;
                            font-size: 12rem;
                            font-weight: 500;
                        }

                        :nth-child(3) {
                            color: #343C4B;
                            font-size: 14rem;
                            font-weight: 500;
                        }
                    }
                }

                .width1 {
                    width: 25%;
                }

                .width2 {
                    width: 50%;
                }

                .width1 {
                    width: 25%;
                }
            }
        }

    }

    .buyQuickly {
        height: 60rem;
        background: #FFF;
        margin-bottom: 100rem;

        padding: 16rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftInfo {
            .tickets {
                display: flex;
                align-items: center;

                :nth-child(1) {
                    color: #343C4B;

                    font-family: Inter;
                    font-size: 12rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16rem;
                }

                :nth-child(2) {
                    color: #FF2D55;

                    font-family: Inter;
                    font-size: 18rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 16rem;
                    margin-left: 8rem;
                }
            }

            .balance {
                display: flex;
                align-items: center;
                margin-top: 8rem;

                :nth-child(1) {
                    color: #343C4B;

                    font-family: Inter;
                    font-size: 12rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16rem;
                }

                :nth-child(2) {
                    color: #F90;
                    font-family: Inter;
                    font-size: 12rem;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16rem;
                    margin-left: 5rem;
                }
            }
        }

        .rightBuy {
            width: 136rem;
            height: 40rem;
            line-height: 40rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20rem;
            background: #FF2D55;
            color: #FFF;

            text-align: center;
            font-family: Inter;
            font-size: 14rem;
            font-style: normal;
            font-weight: 600;
            line-height: 16rem;
        }
    }
    .paySuccess{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 30rem;
        div{
            color:#FF2D55;
            text-align: center;
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
        img{
            margin-top: 20rem;
            width: 50rem;
            height: 50rem;
        }
    }
}